// 1. 初始化Git

import 'package:flutter/material.dart';

void main() {
  //  MaterialApp根组件 可以用来配置页面和标题
  runApp(MaterialApp(
    title: '网页的页签栏标题',
    // 配置页面
    // Scaffold是一个页面组件, 可以配出: 顶部栏 正文 底部tab栏 悬浮按钮 抽屉
    home: Scaffold(
      // 顶部操作栏
      appBar: AppBar(
        title: Text('标题'),
        backgroundColor: Colors.pink,
        // 左侧的按钮
        leading: Icon(Icons.backpack),
        // 右侧的按钮
        actions: [Icon(Icons.share)],
      ),
      // 4.  使用自己封装的组件
      body: Main(),

      //  配出底部的tab栏
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings), label: 'Settings'),
        ],
        currentIndex: 0,
        onTap: (index) {},
      ),
      // 悬浮按钮,   默认在右下角
      floatingActionButton: Icon(Icons.add),
    ),
    // 关闭debugger模式的按钮
    debugShowCheckedModeBanner: false,
  ));
}

//
//
// 


class Main extends StatefulWidget {
  const Main({ Key? key }) : super(key: key);

// 1.创建state组件 ,  一般用不上
  @override
  _MainState createState(){
    print('1. 创建');
    return _MainState();
  }

  
}

class _MainState extends State<Main> {

// 2.  初始化State数据
initState(){
  print('初始化 ');
  super.initState();
}



  int age = 18;

  @override
  Widget build(BuildContext context) {
    print('构建UI');
    return Center(
      // 2. dart中 不是所有的组件都支持事件,TextButton
      child: TextButton(onPressed: (){
        // 3.  调用setState((){ 修改数据 })
        setState(() {
          age++;
        });
        print(age);
      }, child: Text('我今年$age岁' ))
    );
  }
}